<template>
	<view class="bj">


		<view class="container">
			<!-- 金额 -->
			<view class="amount">+2356.21</view>

			<!-- 信息列表 -->
			<view class="info-list">
				<view class="info-item">
					<text class="label">申请时间</text>
					<text class="value">2025-06-05&nbsp;&nbsp;&nbsp;19:20:20</text>
				</view>

				<view class="info-item">
					<text class="label">交易流水号</text>
					<text class="value">020303180118001687007</text>
				</view>

				<view class="info-item">
					<text class="label">费用类型</text>
					<text class="value">欠款还款</text>
				</view>

				<view class="info-item">
					<text class="label">还款类别</text>
					<text class="value">主动还款</text>
				</view>

				<view class="info-item">
					<text class="label">还款银行</text>
					<text class="value">招商银行(*0577)</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailData: {
					applyTime: '2025-06-05 19:20:20',
					tradeNo: '020303180118001687007',
					feeType: '欠款还款',
					repayType: '主动还款',
					repayBank: '招商银行(*0577)',
				},
			}
		}
	};
</script>

<style scoped>
	.bj {
		background-color: #F3F4F5;
		height: 100vh;
		padding: 24rpx;
	}
	.container{
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding-top: 44rpx;
	}

	.amount {
		font-size: 60rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		margin-bottom: 60rpx;
	}

	.info-list {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		color: #333;
			padding-bottom: 24rpx;
	}

	.label {
		color: #999;
		padding-left: 28rpx;

	}

	.value {
		color: #333;
		max-width: 70%;
		text-align: right;
		padding-right: 28rpx;
	
		
	}
</style>